<template>
  <div>
    <div class="top">
      <span>
        学院状态
        <input type="text" v-model="stat" />
      </span>
      <span>
        姓名：
        <input type="text" v-model="name" />
      </span>
      <span>
        手机号
        <input type="text" v-model="mobile" />
      </span>
      <span>
        <button class="search" @click="sousuo">搜索</button>
        <button class="reset" @click="res">重置</button>
      </span>
    </div>
    <template>
      <el-table
        ref="multipleTable"
        :data="list"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>

        <el-table-column prop="nickname" label="姓名" width="120"></el-table-column>
        <el-table-column prop="mobile" label="手机号" show-overflow-tooltip width="195"></el-table-column>
        <el-table-column prop="status" label="状态" width="95"></el-table-column>
        <el-table-column label="日期" width="150">
          <template slot-scope="scope">{{ scope.row.date }}</template>
        </el-table-column>
        <el-table-column prop="cz" label="操作"></el-table-column>
      </el-table>
    </template>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      name: "",
      mobile: "",
      list: [],
      stat: "",
      tableData: []
    };
  },
  mounted() {
    axios
      .get("./api.json")
      .then(res => {
        window.console.log(res.data);
        res.data.forEach(element => {
          var date = new Date(parseInt(element.created_at) * 1000);
          element.date = `${date.getFullYear()}年${date.getMonth() +
            1}月${date.getDay()}日`;
        });
        this.tableData = res.data;
        this.list = this.tableData;
      })
      .catch(() => {});
  },
  methods: {
    sousuo() {
      this.list = [];
      if (this.name.length != 0) {
        this.tableData.forEach(element => {
          if (element.name === this.name) {
            window.console.log(this.name);
            this.list.push(element);
          }
        });
      }

      if (this.mobile.length != 0) {
        this.tableData.forEach(element => {
          if (element.address === this.mobile) {
            this.list.push(element);
          }
        });
      }

      if (this.stat.length != 0) {
        this.tableData.forEach(element => {
          if (element.sate === this.stat) {
            this.list.push(element);
          }
        });
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    res() {
      this.list = this.tableData;
      this.name = "";
      this.stat = "";
      this.mobile = "";
    }
  }
};
</script>

<style scoped>
.top {
  width: 100%;
  height: 50px;
  background: white;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.search {
  width: 70px;
  height: 30px;
  margin-right: 10px;
}
.reset {
  width: 70px;
  height: 30px;
}
</style>